<template>
  <div
    class="app-empty"
    :style="{'height: 100%;': !!isEmpty }"
  >
    <div
      class="app-empty-center"
      :style="{'text-align: center;': !!isEmpty}"
    >
      <slot
        v-if="isEmpty && !isLoading"
        name="empty_content"
      >
        <div class="app-empty__img">
          <img
            :src="src"
            :style="`width:${pictureWidth};`"
          >
        </div>
        <div
          class="app-empty__title"
        >
          <slot name="empty_title">
            <span :class="[type==='noData'?'empty_noData':'']">{{ title }}</span>
            <span>{{ content }}</span>
          </slot>
        </div>
      </slot>
      <slot v-else />
      <slot name="footer" />
    </div>
  </div>
</template>

<script>
export default {
	name: 'AppWrapperEmpty',
	props: {
		/**
     * type()
     * search (搜索)
     * noData (无数据)
     */
		type: {
			type: String,
			default: 'search'
		},

		// 图片宽度
		pictureWidth: {
			type: String,
			default: '250px'
		},

		pictureHeight: {
			type: String,
			default: ''
		},

		title: {
			type: String,
			default: '暂无数据内容'
		},

		// 是否垂直居中
		content: {
			type: String,
			default: ''
		},

		isEmpty: {
			type: Boolean,
			default: false
		},
		isLoading: {
			type: Boolean,
			default: false
		}
	},

	computed: {
		src() {
			// eslint-disable-next-line
      return require(`${this.$constant.imgUrl}empty_${this.type}.png`);
		}
	},
	data() {
		return {
		}
	}
}
</script>

<style lang="scss" scoped>
.app-empty {
  width: 100%;
  display: flex;
  align-items: center;

  & .app-empty-center {
    width: 100%;
    display: flex;
    align-items: center;
  }

  & .app-empty__img {
    width: 100%;
    text-align: center;
    margin: 116px 0 78px;
    & img {
      max-width: 100%;
    }
  }

  & .app-empty__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size:26px;
    color: #666666;
    & span  {
      font-weight: 400;

      & + span {
        font-weight: initial;
        margin-top: 10px;
        font-size:26px;
      }
    }
    & .empty_noData {
       font-size: 26px;
    }
  }
}
</style>